<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<style type="text/css">
			/*.red-text{
				color: red;
			}*/
			.del{
				color: blue;
				cursor: pointer;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<!--<input type="button" id="btnred" value="变红色"/>
		<input type="button" id="btnblue" value="变蓝色"/>
		<span id="span" class="">asdadasdasd</span>-->
		<table border="1" cellspacing="0" cellpadding="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
				<th>操作</th>
			</tr>
			<!--<tr>
				<td width="200" align="center">01</td>
				<td width="200" align="center">张三</td>
				<td width="200" align="center">软件技术</td>
				<td width="200" align="center">
					<span class="del">删除</span>
				</td>
			</tr>
			
			<tr>
				<td width="200" align="center">02</td>
				<td width="200" align="center">李四</td>
				<td width="200" align="center">计算机</td>
				<td width="200" align="center" >
					<span class="del">删除</span>
				</td>
			</tr>-->
		</table>
		
		
		
		
		
		
	</body>
	<script type="text/javascript">
		window.onload = function(){
//			let objBtnred = document.getElementById('btnred')
//			objBtnred.onclick = function(){
//				document.getElementById('span').innerHTML = "<span id='span' class='red-text'>asdadasdasd</span>"
//				document.getElementById('span').className = 'red-text'
//				document.getElementById('span').style.color = 'red'
//				document.getElementById('span').
//				changeColor('red')
//			}
//			document.getElementById('btnblue').onclick = function(){
//				changeColor('blue')
//			}
//			function changeColor(color){
//				document.getElementById('span').innerHTML = 
//				`<span id='span' style='color:${color}'>asdadasdasd</span>`
//			}
			let myObj = [{
				id:1,
				sno:"01",
				name:"张三",
				subject:"软件技术"
			},{
				id:2,
				sno:"02",
				name:"李四",
				subject:"软件技术"
			},{
				id:3,
				sno:"03",
				name:"王五",
				subject:"软件技术"
			}]
			
			let oriHtml = document.getElementById('table').innerHTML
			
			draw()
			function del (id) {
				let objTemp = []
				myObj.forEach(item=>{
					if(item.id != id){
						objTemp.push(item)
					}
				})
				myObj = objTemp
				draw()
			}
			

			function draw () {
				let oTable = document.getElementById('table')
				let html = oriHtml
				myObj.forEach(item => {
				html += `
				<tr>
					<td width="200" align="center">
						${item.sno}
					</td>
					<td width="200" align="center">
						${item.name}
					</td>
					<td width="200" align="center">
						${item.subject}
					</td>
					<td width="200" align="center" >
						<span class="del">删除</span>
					</td>
				</tr>
				`
			})
				oTable.innerHTML = html
				
				myObj.forEach(item=>{
					document.getElementById(item.id).onclick = function(){
						del(item.id)
					}
				})
			}
		}
	</script>
</html>
